<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

// 模拟任务数据
const taskInfo = ref({
  id: 'TASK20230801001',
  name: '边境巡逻与火力支援',
  type: '作战任务',
  ammoRequirements: {
    armorPiercing: 20,
    he: 15,
    smoke: 10
  },
  missileRequirements: {
    antiTank: 4,
    surfaceToAir: 2
  }
})

// 模拟车辆匹配结果数据
const matchedVehicles = ref([
  {
    id: 'V2023001',
    name: 'ZTZ-99主战坦克',
    type: '主战坦克',
    status: '可用',
    health: 92,
    distance: 15.6,
    location: 'A区训练场',
    recommended: true,
    ammo: {
      armorPiercing: 25,
      he: 20,
      smoke: 12
    },
    missiles: {
      antiTank: 6,
      surfaceToAir: 0
    },
    weaponCompliance: {
      armorPiercing: true,
      he: true,
      smoke: true,
      antiTank: true,
      surfaceToAir: false
    },
    risks: [
      { level: '中', description: '变速箱温度偏高，建议减少连续行进' },
      { level: '低', description: '车载通信设备信号不稳定' }
    ]
  },
  {
    id: 'V2023015',
    name: 'ZBD-04步兵战车',
    type: '步兵战车',
    status: '可用',
    health: 87,
    distance: 22.3,
    location: 'B区维修站',
    recommended: false,
    ammo: {
      armorPiercing: 15,
      he: 30,
      smoke: 20
    },
    missiles: {
      antiTank: 4,
      surfaceToAir: 4
    },
    weaponCompliance: {
      armorPiercing: false,
      he: true,
      smoke: true,
      antiTank: true,
      surfaceToAir: true
    },
    risks: [
      { level: '低', description: '左侧负重轮有轻微磨损' }
    ]
  },
  {
    id: 'V2023032',
    name: 'PLZ-05自行榴弹炮',
    type: '火力支援',
    status: '可用',
    health: 76,
    distance: 8.2,
    location: 'C区弹药库旁',
    recommended: false,
    ammo: {
      armorPiercing: 0,
      he: 50,
      smoke: 15
    },
    missiles: {
      antiTank: 0,
      surfaceToAir: 0
    },
    weaponCompliance: {
      armorPiercing: false,
      he: true,
      smoke: true,
      antiTank: false,
      surfaceToAir: false
    },
    risks: [
      { level: '中', description: '液压系统压力偏低，影响射击精度' },
      { level: '高', description: '火控系统稳定性下降，建议检修' }
    ]
  }
])

// 高亮推荐车辆
const recommendedVehicle = ref({})

// 风险等级颜色映射
const riskLevelColor = {
  '高': '#ff4d4f',
  '中': '#faad14',
  '低': '#52c41a'
}

// 车辆健康度图表实例
let healthChart = null

// 初始化图表
const initCharts = () => {
  // 健康度对比图表
  const healthChartElement = document.getElementById('health-chart')
  if (healthChartElement) {
    healthChart = echarts.init(healthChartElement)
    updateHealthChart()
  }
}

// 更新健康度图表
const updateHealthChart = () => {
  if (!healthChart) return
  
  const option = {
    title: {
      text: '匹配车辆健康度对比',
      textStyle: {
        color: '#e4e8f0'
      },
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      textStyle: {
        color: '#000'
      },
      backgroundColor: 'rgba(255,255,255,0.9)'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: matchedVehicles.value.map(vehicle => vehicle.name),
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        lineStyle: {
          color: '#2a3a6a'
        }
      },
      axisLabel: {
        color: '#a0b1d0'
      }
    },
    yAxis: {
      type: 'value',
      name: '健康度(%)',
      nameTextStyle: {
        color: '#a0b1d0'
      },
      axisLine: {
        lineStyle: {
          color: '#2a3a6a'
        }
      },
      axisLabel: {
        color: '#a0b1d0'
      },
      splitLine: {
        lineStyle: {
          color: '#2a3a6a'
        }
      }
    },
    series: [{
      name: '健康度',
      type: 'bar',
      barWidth: '60%',
      data: matchedVehicles.value.map(vehicle => vehicle.health),
      itemStyle: {
        color: function(params) {
          // 推荐车辆使用特殊颜色
          if (matchedVehicles.value[params.dataIndex].recommended) {
            return '#409eff'
          }
          return '#67c23a'
        }
      }
    }]
  }
  
  healthChart.setOption(option)
}

// 确认并下发任务
const confirmAndAssignTask = (vehicle) => {
  ElMessage.success(`任务已成功下发至车辆 ${vehicle.name} (${vehicle.id})`)
  // 实际项目中这里会调用API下发任务
}

// 挂载时初始化
onMounted(() => {
  // 设置推荐车辆
  recommendedVehicle.value = matchedVehicles.value.find(v => v.recommended) || matchedVehicles.value[0]
  // 初始化图表
  initCharts()
})

// 组件卸载前清理
onBeforeUnmount(() => {
  if (healthChart) {
    healthChart.dispose()
  }
})

// 监听窗口大小变化
window.addEventListener('resize', () => {
  if (healthChart) {
    healthChart.resize()
  }
})
</script>

<template>
  <div class="task-result-container">
    <!-- 顶部标题栏 -->
    <div class="result-header">
      <div class="header-left">
        <h1><i class="el-icon-cpu"></i> 特种车辆设备故障智能分析系统</h1>
        <p>任务车辆匹配结果</p>
      </div>
      <div class="header-right">
        <el-avatar :size="40" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
        <span>管理员</span>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="result-content">
      <div class="page-header">
        <h2>任务车辆匹配结果</h2>
        <el-page-header @back="$router.go(-1)" content="车辆匹配结果" />
      </div>

      <!-- 任务信息概览 -->
      <div class="task-summary-card">
        <div class="card-header">
          <h3><i class="el-icon-tickets"></i> 任务信息</h3>
        </div>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="task-info-item">
              <div class="label">任务ID:</div>
              <div class="value">{{ taskInfo.id }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="task-info-item">
              <div class="label">任务名称:</div>
              <div class="value">{{ taskInfo.name }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="task-info-item">
              <div class="label">任务类型:</div>
              <div class="value">{{ taskInfo.type }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="task-info-item">
              <div class="label">弹药需求:</div>
              <div class="value">
                穿甲弹:{{ taskInfo.ammoRequirements.armorPiercing }} 
                高爆弹:{{ taskInfo.ammoRequirements.he }} 
                烟雾弹:{{ taskInfo.ammoRequirements.smoke }}
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 推荐车辆 -->
      <div class="recommended-vehicle-card" v-if="recommendedVehicle.id">
        <div class="card-header">
          <h3><i class="el-icon-star-on"></i> 推荐车辆</h3>
          <el-tag type="success" size="large">系统推荐</el-tag>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="vehicle-basic-info">
              <div class="vehicle-name">{{ recommendedVehicle.name }}</div>
              <div class="vehicle-id">编号: {{ recommendedVehicle.id }}</div>
              <div class="vehicle-type">类型: {{ recommendedVehicle.type }}</div>
              <div class="vehicle-location">位置: {{ recommendedVehicle.location }}</div>
              <div class="vehicle-distance">距离: {{ recommendedVehicle.distance }} km</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="vehicle-health">
              <div class="health-title">车辆健康度</div>
              <el-progress type="circle" :percentage="recommendedVehicle.health" :width="120" />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="vehicle-actions">
              <el-button type="primary" size="large" @click="confirmAndAssignTask(recommendedVehicle)">
                确认并下发任务
              </el-button>
              <div class="reason">
                推荐理由：健康度最高且距离较近，武器系统基本满足任务需求
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 武器系统符合性校验 -->
      <div class="weapon-compliance-card">
        <div class="card-header">
          <h3><i class="el-icon-check"></i> 武器系统符合性校验</h3>
        </div>
        <el-table :data="[recommendedVehicle]" style="width: 100%" class="result-table">
          <el-table-column prop="name" label="车辆型号" width="180" />
          <el-table-column label="穿甲弹" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.weaponCompliance.armorPiercing ? 'success' : 'danger'">
                {{ scope.row.ammo.armorPiercing }}/{{ taskInfo.ammoRequirements.armorPiercing }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="高爆弹" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.weaponCompliance.he ? 'success' : 'danger'">
                {{ scope.row.ammo.he }}/{{ taskInfo.ammoRequirements.he }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="烟雾弹" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.weaponCompliance.smoke ? 'success' : 'danger'">
                {{ scope.row.ammo.smoke }}/{{ taskInfo.ammoRequirements.smoke }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="反坦克导弹" width="120">
            <template #default="scope">
              <el-tag :type="scope.row.weaponCompliance.antiTank ? 'success' : 'danger'">
                {{ scope.row.missiles.antiTank }}/{{ taskInfo.missileRequirements.antiTank }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="地空导弹" width="120">
            <template #default="scope">
              <el-tag :type="scope.row.weaponCompliance.surfaceToAir ? 'success' : 'danger'">
                {{ scope.row.missiles.surfaceToAir }}/{{ taskInfo.missileRequirements.surfaceToAir }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 风险提示 -->
      <div class="risk-alert-card">
        <div class="card-header">
          <h3><i class="el-icon-warning"></i> 风险提示</h3>
        </div>
        <el-table :data="recommendedVehicle.risks" style="width: 100%" class="result-table">
          <el-table-column prop="level" label="风险等级" width="100">
            <template #default="scope">
              <el-tag :color="riskLevelColor[scope.row.level]" style="color: white;">
                {{ scope.row.level }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="风险描述" />
        </el-table>
      </div>

      <!-- 所有匹配车辆列表 -->
      <div class="all-vehicles-card">
        <div class="card-header">
          <h3><i class="el-icon-truck"></i> 所有匹配车辆</h3>
        </div>
        <el-table :data="matchedVehicles" style="width: 100%" :row-class-name="({row}) => row.recommended ? 'recommended-row' : ''" class="result-table">
          <el-table-column prop="name" label="车辆型号" width="150" />
          <el-table-column prop="id" label="编号" width="100" />
          <el-table-column prop="type" label="类型" width="120" />
          <el-table-column prop="health" label="健康度(%)" width="120">
            <template #default="scope">
              <el-progress :percentage="scope.row.health" :show-text="false" />
            </template>
          </el-table-column>
          <el-table-column prop="distance" label="距离(km)" width="100" />
          <el-table-column prop="location" label="位置" width="150" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" @click="confirmAndAssignTask(scope.row)">下发任务</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 健康度对比图表 -->
      <div class="health-chart-card">
        <div class="card-header">
          <h3><i class="el-icon-data-line"></i> 匹配车辆健康度对比</h3>
        </div>
        <div id="health-chart" style="height: 400px;"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.task-result-container {
  background-color: #0f1c3c;
  color: #e4e8f0;
  padding: 20px;
  height: 100vh;
  overflow-y: auto;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background: linear-gradient(90deg, #1a2a52, #0a1a3a);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  border: 1px solid #2a3a6a;
}

.header-left h1 {
  font-size: 24px;
  font-weight: 600;
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 5px;
}

.header-left p {
  font-size: 14px;
  color: #a0b1d0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.result-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-header h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: #e4e8f0;
}

.task-summary-card,
.recommended-vehicle-card,
.weapon-compliance-card,
.risk-alert-card,
.all-vehicles-card,
.health-chart-card {
  background: linear-gradient(145deg, #1a2a52, #0a1a3a);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  border: 1px solid #2a3a6a;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #2a3a6a;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  color: #e4e8f0;
}

.task-info-item {
  display: flex;
  flex-direction: column;
}

.task-info-item .label {
  font-size: 14px;
  color: #a0b1d0;
}

.task-info-item .value {
  font-weight: bold;
  color: #e4e8f0;
}

.vehicle-basic-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vehicle-name {
  font-size: 24px;
  font-weight: bold;
  color: #e4e8f0;
}

.vehicle-id, .vehicle-type, .vehicle-location, .vehicle-distance {
  font-size: 16px;
  color: #a0b1d0;
}

.vehicle-health {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.health-title {
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: bold;
  color: #e4e8f0;
}

.vehicle-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 20px;
}

.reason {
  font-size: 14px;
  color: #a0b1d0;
  text-align: center;
}

.result-table {
  background-color: rgba(10, 26, 58, 0.5);
  border-radius: 8px;
}

.result-table :deep(.el-table__header th) {
  background-color: #1a2a52;
  color: #e4e8f0;
}

.result-table :deep(.el-table__row) {
  background-color: rgba(10, 26, 58, 0.3);
  color: #e4e8f0;
}

.result-table :deep(.el-table__row:hover) {
  background-color: rgba(26, 42, 82, 0.7) !important;
}

.recommended-row {
  background-color: rgba(64, 158, 255, 0.1) !important;
}

:deep(.el-table .recommended-row:hover) {
  background-color: rgba(64, 158, 255, 0.2) !important;
}

@media (max-width: 1200px) {
  .result-content {
    flex-direction: column;
  }
}
</style>